<template>
  <div class="zl-checklist-wrapper">
    <ul>
      <li class="inlineli" v-for="(item,index) in dataSource" :key="index">
        <input class="zl-checkbox" type="checkbox" :value="item" :id="index" v-model="checkedItems"/><label :for="index"><span>{{item}}</span></label>
      </li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'checkList',
    props: {
      dataSource: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      return {
        checkedItems: []
      };
    },
    watch: {
      checkedItems: function (items) {
        this.$emit('checkItemsChanged', items);
      }
    }
  };

</script>
<style lang="stylus" rel="stylesheet/stylus">
  .zl-checklist-wrapper
    .inlineli
      display inline-block
      margin 5px 12px 5px 12px
      label
        display: inline
      input[type="checkbox"]
        display: none;
      .zl-checkbox + label
        background-color: #FFF
        padding-left 12px
        padding-right 12px
        display: inline-block
        position: relative
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.3)
        height: 24px
        line-height 24px
        overflow: hidden
        font-size: 14px
        color: #464E50
        transition: all 0.3s linear, color 0 linear
      .zl-checkbox:checked + label
        color: #fff
      .zl-checkbox + label > span
        position: relative
        z-index: 100
        font-family: 'adelle-sans', sans-serif
      .zl-checkbox + label:before
        content: ' '
        position: absolute
        background: #26A2FF
        width: 0%
        height: 100%
        top: 0
        -webkit-transition: all 0.3s ease-in
        transition: all 0.3s ease-in
        left: 0
      .zl-checkbox:checked + label:before
        content: ' '
        position: absolute
        width: 100%
        height: 100%
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1)
        top: 0
        left: 0
</style>
